<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./css/Clear-Style.css">
    <link rel="stylesheet" href="./css/音乐播放器.css">
</head>

<body>
    <div class="player">
        <div class="player-nav">
            <p>音乐播放器</p>
            <span class="search">
                <input type="text" value="许嵩" placeholder="请输入歌曲名称或者歌手名称，回车搜索" />
                <img src="./Sass-音乐播放器素材/images/zoom.png" alt="">
            </span>

        </div>
        <div class="player-container">
            <div class="container-left">
                <p class="active">
                    <span>希望爱</span>
                    <span class="img"></span>
                </p>
                <p class="">
                    <span>希望爱</span>
                    <span class="img"></span>
                </p>
            </div>
            <img src="./Sass-音乐播放器素材/images/line.png">
            <div class="container-middle">
                <img src="./Sass-音乐播放器素材/images/player_bar.png">
                <div class="cd">
                    <img src="./Sass-音乐播放器素材/images/cover.png">
                    <img src="./Sass-音乐播放器素材/images/disc.png">
                </div>
                <div class="title">歌词功能待后续开发</div>
            </div>
            <img src="./Sass-音乐播放器素材/images/line.png">
            <div class="container-right">
                <h4>热门留言</h4>
                <!-- 留言内容 -->
                <div class="message">
                    <img src="./Sass-音乐播放器素材/images/person01.png" alt="">
                    <div class="content">
                        <h5>葱葱匆</h5>
                        <span>黄渤唱的爱与愁好听</span>
                    </div>
                </div>

                <div class="message">
                    <img src="./Sass-音乐播放器素材/images/person02.png" alt="">
                    <div class="content">
                        <h5>葱葱匆</h5>
                        <span>黄渤唱的爱与愁好听</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="player-status">
            <audio src="" controls ></audio>
        </div>
    </div>
    <div class="video">
        <img src="./Sass-音乐播放器素材/images/shutoff.png">
        <video src="" controls></video>
    </div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
<script>
    
    var closure = document.querySelector(".video img")
    
    // 关闭mv
    closure.onclick = function () {
        video.style.display = "none"
    }
</script>

</html>